﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>Popover 提示备注 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link " href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link active" href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#popovers" class="nav-link font-weight-bold"><span>弹出框</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#overview" class="nav-link"><span>总览</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#positioning" class="nav-link"><span>定位</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#triggers" class="nav-link"><span>触发</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#making-popovers-work-for-keyboard-and-assistive-technology-users" class="nav-link"><span>使弹出窗口对键盘和辅助技术用户有效</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#caveats-with-focus-trigger-on-button-elements" class="nav-link"><span>重点触发的button的元素</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#dismiss-on-next-click-self-dismissing" class="nav-link"><span>在下次点击时关闭（自行关闭）</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#heading-and-content" class="nav-link"><span>标题和内容</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#variants-and-custom-class" class="nav-link"><span>变体和自定义类</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#directive-syntax-and-usage" class="nav-link"><span>指令语法和用法</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#usage" class="nav-link"><span>用法</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#hiding-and-showing-popovers-via-root-events" class="nav-link"><span>通过$ root事件隐藏和显示弹出窗口</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#disabling-and-enabling-popovers-via-root-events" class="nav-link"><span>通过$ root事件禁用和启用弹出窗口</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#see-also" class="nav-link"><span>也可以看看</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#directive-reference" class="nav-link"><span>指令参考</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-directives" class="nav-link"><span>导入单个指令</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/directives/" class="nuxt-link-active" target="_self">指令</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">Popover 提示备注</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">Popover 提示备注</h1>
  <p class="bd-lead">使用Bootstrap v4 CSS进行样式和动画处理将BootstrapVue弹出窗口添加到站点上任何元素的文档和示例。 悬停，悬停或单击某个元素可以触发弹出窗口，并且可以同时包含内容和标题。 弹出窗口是类固醇的工具提示。</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>


<nav class="bd-quick-links mb-3 d-xl-none" style="" data-v-4abf2740="">
<header data-v-4abf2740="">
<button data-v-4abf2740="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"> Show page table of contents </button>
</header>
<ul data-v-4abf2740="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#overview" class=""><span data-v-4abf2740="">Overview</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#positioning" class=""><span data-v-4abf2740="">Positioning</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#triggers" class=""><span data-v-4abf2740="">Triggers</span></a>
<ul data-v-4abf2740="">
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#making-popovers-work-for-keyboard-and-assistive-technology-users" class=""><span data-v-4abf2740="">Making popovers work for keyboard and assistive technology users</span></a></li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#caveats-with-focus-trigger-on-button-elements" class=""><span data-v-4abf2740="">Caveats with focus trigger on &lt;button&gt; elements</span></a></li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#dismiss-on-next-click-self-dismissing" class=""><span data-v-4abf2740="">Dismiss on next click (self dismissing)</span></a></li>
</ul>
</li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#heading-and-content" class=""><span data-v-4abf2740="">Heading and content</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#variants-and-custom-class" class=""><span data-v-4abf2740="">Variants and custom class</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#directive-syntax-and-usage" class=""><span data-v-4abf2740="">Directive syntax and usage</span></a>
<ul data-v-4abf2740="">
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#usage" class=""><span data-v-4abf2740="">Usage</span></a></li>
</ul>
</li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#hiding-and-showing-popovers-via-root-events" class=""><span data-v-4abf2740="">Hiding and showing popovers via $root events</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#disabling-and-enabling-popovers-via-root-events" class=""><span data-v-4abf2740="">Disabling and enabling popovers via $root events</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#see-also" class=""><span data-v-4abf2740="">See also</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#directive-reference" class=""><span data-v-4abf2740="">Directive reference</span></a>
<ul data-v-4abf2740="">
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#importing-individual-directives" class=""><span data-v-4abf2740="">Importing individual directives</span></a></li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-4abf2740="">Importing as a Vue.js plugin</span></a></li>
</ul>
</li>
</ul>
</nav>
<p>在您想要显示弹出框的任何<strong>元素</strong>或<strong>component</strong>上使用<code class="text-nowrap" translate="no">v-b-popover</code>指令。   </p>
<div translate="translate" class="bd-example vue-example vue-example-b-popover">
<div class="text-center my-3">
<button title="Popover Title" type="button" class="btn btn-secondary">Hover Me</button>
</div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center my-3"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover</span>=<span class="hljs-string">"'I am popover content!'"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Popover Title"</span>&gt;</span>Hover Me<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
</div>
<h2 id="overview" class="bv-no-focus-ring"><span class="bd-content-title">总览<a class="anchorjs-link" href="#overview" aria-labelledby="overview"></a></span></h2>
<p>使用popover指令时要了解的事项：</p>
<ul>
<li>Popover依赖于第三方库<a href="https://popper.js.org/" target="_blank" rel="noopener">Popper.js</a>进行定位。 </li>
<li>弹出窗口需要BootstrapVue的自定义SCSS / CSS才能正常运行以及用于变体。</li>
<li>如果标题和内容均未提供（或为空字符串），则不会显示弹出窗口。</li>
<li>S指定容器：“ body”（默认），以避免在更复杂的组件（例如输入组，按钮组等）中出现渲染问题。</li>
<li>在隐藏元素上触发弹出窗口将不起作用。</li>
<li> <code class="text-nowrap" translate="no">禁用</code> 元素的弹出窗口必须在包装器元素上触发。</li>
<li>从跨越多行的超链接触发时，弹出窗口将居中。 使用空格：nowrap; 在您的<a> s，<b-link> s或<router-link> s b上，以避免此行为。  </li>
<li>触发弹出窗口的元素应位于文档选项卡序列中。 如果需要，添加 <code class="text-nowrap" translate="no">tabindex="0"</code> 定位</li>
</ul>
<h2 id="positioning" class="bv-no-focus-ring"><span class="bd-content-title">定位<a class="anchorjs-link" href="#positioning" aria-labelledby="positioning"></a></span></h2>
<p>十二个选项可用于定位： <code class="text-nowrap" translate="no">上</code>, <code class="text-nowrap" translate="no">左上</code>, <code class="text-nowrap" translate="no">右上</code>, <code class="text-nowrap" translate="no">右</code>, <code class="text-nowrap" translate="no">右上</code>, <code class="text-nowrap" translate="no">右下</code>, <code class="text-nowrap" translate="no">下</code>, <code class="text-nowrap" translate="no">左下</code>, <code class="text-nowrap" translate="no">右下</code>, <code class="text-nowrap" translate="no">左</code>, <code class="text-nowrap" translate="no">左上</code>, 和 <code class="text-nowrap" translate="no">左下</code> .
  相对于触发元素定位。</p>
<div class="bd-example bd-example-popover-static">
<div class="popover b-popover bs-popover-top bs-popover-top-docs">
<div class="arrow" style="left: calc(50% - 8px)"></div>
<h3 class="popover-header">Popover top</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-top bs-popover-top-docs">
<div class="arrow" style="right: 0px"></div>
<h3 class="popover-header">Popover topleft</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-top bs-popover-top-docs">
<div class="arrow" style="left: 0px"></div>
<h3 class="popover-header">Popover topright</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-right bs-popover-right-docs">
<div class="arrow" style="top: calc(50% - 4px)"></div>
<h3 class="popover-header">Popover right</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-right bs-popover-right-docs">
<div class="arrow" style="bottom: 0px"></div>
<h3 class="popover-header">Popover righttop</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-right bs-popover-right-docs">
<div class="arrow" style="top: 0px"></div>
<h3 class="popover-header">Popover rightbottom</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-bottom bs-popover-bottom-docs">
<div class="arrow" style="left: calc(50% - 8px)"></div>
<h3 class="popover-header">Popover bottom</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-bottom bs-popover-bottom-docs">
<div class="arrow" style="right: 0px"></div>
<h3 class="popover-header">Popover bottomleft</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-bottom bs-popover-bottom-docs">
<div class="arrow" style="left: 0px"></div>
<h3 class="popover-header">Popover bottomright</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-left bs-popover-left-docs">
<div class="arrow" style="top: calc(50% - 4px)"></div>
<h3 class="popover-header">Popover left</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-left bs-popover-left-docs">
<div class="arrow" style="bottom: 0px"></div>
<h3 class="popover-header">Popover lefttop</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-left bs-popover-left-docs">
<div class="arrow" style="top: 0px"></div>
<h3 class="popover-header">Popover leftbottom</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="clearfix"></div>
</div>
<p><strong>现场范例
</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-popover-positioning">
<div>
<div class="container-fluid">
<div class="row text-center">
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Top</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Right</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Left</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Bottom</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Top right</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Top left</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Bottom right</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Bottom left</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Left top</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Left bottom</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">right top</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">right bottom</button>
</div>
</div>
</div>
</div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover.top</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Top<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover.right</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Right<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover.left</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Left<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover.bottom</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Bottom<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover.topright</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Top right<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover.topleft</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Top left<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover.bottomright</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Bottom right<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover.bottomleft</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Bottom left<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover.lefttop</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Left top<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover.leftbottom</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Left bottom<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover.righttop</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>right top<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover.rightbottom</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>right bottom<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
</div>
<h2 id="triggers" class="bv-no-focus-ring"><span class="bd-content-title">扳机<a class="anchorjs-link" href="#triggers" aria-labelledby="triggers"></a></span></h2>
<p>可以通过 ，<code class="text-nowrap" translate="no">单击</code> <code class="text-nowrap" translate="no">悬停</code>，<code class="text-nowrap" translate="no">焦点</code>的任意组合来触发（打开/关闭）弹出窗口。 可以指定，其中只能以
opened or closed <a href="#hiding-and-showing-popovers-via-root-events" class="font-weight-bold">编程方式</a>打开或关闭弹出窗口。</p>
<p>如果一个弹出窗口有多个触发器，则必须先清除所有触发器，然后才能关闭该弹出窗口。  即 如果弹出窗口具有触发 <code class="text-nowrap" translate="no">焦点单击</code>, 并且已通过<code class="text-nowrap" translate="no">焦点</code>将其打开, 然后用户单击触发元素，他们必须再次单击它 <strong>并且</strong>移动焦点以关闭弹出窗口。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-popover-triggers">
<div>
<div class="container-fluid">
<h5>扳机</h5>
<div class="row text-center">
<div class="py-3 col-md-6">
<button type="button" class="btn btn-outline-success">Click (default)</button>
</div>
<div class="py-3 col-md-6">
<button type="button" class="btn btn-outline-success">Hover</button>
</div>
<div class="py-3 col-md-6">
<button type="button" class="btn btn-outline-success">Focus</button>
</div>
<div class="py-3 col-md-6">
<button type="button" class="btn btn-outline-success">Hover + Focus</button>
</div>
</div>
</div>
</div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">h5</span>&gt;</span>Triggers<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-success"</span>&gt;</span>Click (default)<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-success"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.focus</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-success"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover.focus</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-success"</span>&gt;</span>Hover + Focus<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
</div>
<h3 id="making-popovers-work-for-keyboard-and-assistive-technology-users" class="bv-no-focus-ring"><span class="bd-content-title">使弹出窗口对键盘和辅助技术用户有效<a class="anchorjs-link" href="#making-popovers-work-for-keyboard-and-assistive-technology-users" aria-labelledby="making-popovers-work-for-keyboard-and-assistive-technology-users"></a></span></h3>
<p>您只应将弹出窗口添加到传统上可键盘聚焦和交互的HTML元素（例如链接，按钮或表单控件）。尽管可以通过添加<code class="text-nowrap" translate="no">tabindex="0"</code>列如 <code class="text-nowrap" translate="no">&lt;span&gt;</code>s) 成为可聚焦的，但这将为键盘用户在非交互式元素上添加潜在的令人讨厌且令人困惑的制表位。 另外，在这种情况下，目前大多数辅助技术都不会宣布弹出窗口。</p>
<p>此外，不要仅将鼠标 <code class="text-nowrap" translate="no">悬停</code>作为弹出窗口的触发器，因为这将使仅键盘用户无法触发弹出窗口。</p>
<h3 id="caveats-with-focus-trigger-on-button-elements" class="bv-no-focus-ring"><span class="bd-content-title">重点 <code class="text-nowrap" translate="no">聚焦</code> 触发<code class="text-nowrap" translate="no">&lt;button&gt;</code> 元素警告<a class="anchorjs-link" href="#caveats-with-focus-trigger-on-button-elements" aria-labelledby="caveats-with-focus-trigger-on-button-elements"></a></span></h3>
<p>仅为了<code class="text-nowrap" translate="no">触点</code> 触发器时，为了实现正确的跨浏览器和跨平台行为，您必须使用呈现 <code class="text-nowrap" translate="no">&lt;a&gt;</code>标签的元素，而不是 <code class="text-nowrap" translate="no">&lt;a&gt;</code>标签</p>
属性。 
<p>下面将生成一个看起来像按钮的 <code class="text-nowrap" translate="no">&lt;a&gt;</code> 的按钮。</p>
<div class="bd-code">
<pre class="hljs html p-2" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>
  <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>
  <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span>
  <span class="hljs-attr">v-b-popover.focus</span>=<span class="hljs-string">"'Popover content'"</span>
  <span class="hljs-attr">title</span>=<span class="hljs-string">"Popover title"</span>
&gt;</span>
  Link button with popover directive
<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span></pre>
</div>
<h3 id="dismiss-on-next-click-self-dismissing" class="bv-no-focus-ring"><span class="bd-content-title">在下次点击时关闭（自行关闭）<a class="anchorjs-link" href="#dismiss-on-next-click-self-dismissing" aria-labelledby="dismiss-on-next-click-self-dismissing"></a></span></h3>
<p>单独使用 <code class="text-nowrap" translate="no">焦点</code> 触发器可消除用户下次单击时的弹出窗口。 <code class="text-nowrap" translate="no">焦点</code> 还使弹出框同时在 <code class="text-nowrap" translate="no">焦点</code> 和 <code class="text-nowrap" translate="no">单击</code>上激活（因为单击使元素获得焦点，前提是该元素位于页面的选项卡序列中）。</p>
<p>但是，你可以将触发器指定为 <code class="text-nowrap" translate="no">单击模糊</code>这将仅使单击激活弹出窗口，而单击元素（或失去焦点到另一个元素或文档的一部分）将关闭弹出窗口。</p>
<p>此 <code class="text-nowrap" translate="no">模糊</code>触发器必须与。<code class="text-nowrap" translate="no">单击</code> 触发器结合使用</p>
<p>以下示例显示了 <code class="text-nowrap" translate="no">单击模糊</code> 用例子. 弹出窗口仅在单击按钮时打开，在单击按钮或其他任何位置（或通过按 <kbd class="notranslate" translate="no">TAB</kbd> 键更改焦点）时将关闭。 有人称这种行为为自欺欺人。</em>.</p>
<div translate="translate" class="bd-example vue-example vue-example-b-popover-dismiss-next-click">
<div>
<div class="container-fluid">
<div class="row text-center">
<div class="py-3 col-md-3">
<button title="Popover" type="button" class="btn btn-primary">Click</button>
</div>
<div class="py-3 col-md-3">
<button title="Popover" type="button" class="btn btn-primary">Click</button>
</div>
<div class="py-3 col-md-3">
<button title="Popover" type="button" class="btn btn-primary">Click</button>
</div>
<div class="py-3 col-md-3">
<button title="Popover" type="button" class="btn btn-primary">Click</button>
</div>
</div>
</div>
</div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.click.blur</span>=<span class="hljs-string">"'Content'"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Popover"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Click<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.click.blur</span>=<span class="hljs-string">"'Content'"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Popover"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Click<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.click.blur</span>=<span class="hljs-string">"'Content'"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Popover"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Click<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.click.blur</span>=<span class="hljs-string">"'Content'"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Popover"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Click<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
</div>
<h2 id="heading-and-content" class="bv-no-focus-ring"><span class="bd-content-title">标题和内容<a class="anchorjs-link" href="#heading-and-content" aria-labelledby="heading-and-content"></a></span></h2>
<p>有几个选项可用于设置弹出窗口的标题和内容。</p>
<p>默认情况下，popover将使用元素的 <code class="text-nowrap" translate="no">title</code>属性作为popover标题，并将内容作为字符串传递给<code class="text-nowrap" translate="no">v-b-popover</code> 指令，标题和指令也可以作为对象传递给
<code class="text-nowrap" translate="no">v-b-popover</code> 形式为：</p>
<!-- eslint-disable no-unused-vars -->

<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">const</span> options = {
  <span class="hljs-attr">title</span>: <span class="hljs-string">'This is the title'</span>,
  <span class="hljs-attr">content</span>: <span class="hljs-string">'This is the content'</span>
}</pre>
</div>
<p>如果你的内容具有基本的HTML标记，则还需要将 <code class="text-nowrap" translate="no">html</code>属性设置为true，或使用指令修饰符<code class="text-nowrap" translate="no">html</code></p>
<!-- eslint-disable no-unused-vars -->

<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-comment">// Object format with HTML:</span>
<span class="hljs-keyword">const</span> options = {
  <span class="hljs-attr">title</span>: <span class="hljs-string">'This is the &lt;strong&gt;title&lt;/strong&gt;'</span>,
  <span class="hljs-attr">content</span>: <span class="hljs-string">'This is the &lt;em&gt;content&lt;em&gt;'</span>,
  <span class="hljs-attr">html</span>: <span class="hljs-literal">true</span>
}</pre>
</div>
<p>标题和内容也可以是函数引用，每次打开弹出窗口时都会调用它们。 要在打开时使函数返回的值具有反应性，只要内容更改，就将标题或内容设置为新的函数引用。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-popover-content">
<div class="container-fluid">
<div class="row text-center">
<div class="py-3 col-md-3">
<button title="Title from title attribute" type="button" class="btn btn-success"> Title + Content </button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-success"> Config Object </button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-success">Config from data</button>
</div>
<div class="py-3 col-md-3">
<button title="Popover with HTML" type="button" class="btn btn-success"> Method </button>
</div>
</div>
<div class="row text-center">
<div class="py-3 col-12">
<button type="button" class="btn btn-success">Config Object</button>
</div>
</div>
</div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover</span>=<span class="hljs-string">"'Content!'"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Title from title attribute"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>
          Title + Content
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>
          <span class="hljs-attr">v-b-popover.hover</span>=<span class="hljs-string">"{title:'Popover', content:'This is the content of popover'}"</span>
          <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>
        &gt;</span>
          Config Object
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover</span>=<span class="hljs-string">"popoverData"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>Config from data<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover.html</span>=<span class="hljs-string">"popoverMethod"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Popover with HTML"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>
          Method
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"12"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover</span>=<span class="hljs-string">"popoverConfig"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>Config Object<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">date</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(),
        <span class="hljs-attr">counter</span>: <span class="hljs-number">0</span>,
        <span class="hljs-attr">timer</span>: <span class="hljs-literal">null</span>
      }
    },
    <span class="hljs-attr">computed</span>: {
      popoverConfig() {
        <span class="hljs-comment">// Both title and content specified as a function in this example</span>
        <span class="hljs-comment">// and will be called the each time the popover is opened</span>
        <span class="hljs-keyword">return</span> {
          <span class="hljs-attr">html</span>: <span class="hljs-literal">true</span>,
          <span class="hljs-attr">title</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
            <span class="hljs-comment">// Note this is called only when the popover is opened</span>
            <span class="hljs-keyword">return</span> <span class="hljs-string">'Hello &lt;b&gt;Popover:&lt;/b&gt; '</span> + ++<span class="hljs-keyword">this</span>.counter
          },
          <span class="hljs-attr">content</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
            <span class="hljs-comment">// Note this is called only when the popover is opened</span>
            <span class="hljs-keyword">return</span> <span class="hljs-string">'The date is:&lt;br&gt;&lt;em&gt;'</span> + <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>() + <span class="hljs-string">'&lt;/em&gt;'</span>
          }
        }
      },
      popoverData() {
        <span class="hljs-keyword">return</span> {
          <span class="hljs-attr">title</span>: <span class="hljs-string">'Popover Title'</span>,
          <span class="hljs-attr">content</span>: <span class="hljs-string">'The date is '</span> + <span class="hljs-keyword">this</span>.date
        }
      }
    },
    mounted() {
      <span class="hljs-keyword">this</span>.timer = setInterval(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.date = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>()
      }, <span class="hljs-number">1000</span>)
    },
    beforeDestroy() {
      clearInterval(<span class="hljs-keyword">this</span>.timer)
    },
    <span class="hljs-attr">methods</span>: {
      popoverMethod() {
        <span class="hljs-comment">// Returns the content as a string</span>
        <span class="hljs-comment">// Will be called each time the popover is opened</span>
        <span class="hljs-keyword">return</span> <span class="hljs-string">'&lt;strong&gt;'</span> + <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>() + <span class="hljs-string">'&lt;/strong&gt;'</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
</div>
<h2 id="variants-and-custom-class" class="bv-no-focus-ring"><span class="bd-content-title">变体和自定义类<a class="anchorjs-link" href="#variants-and-custom-class" aria-labelledby="variants-and-custom-class"></a></span></h2>
<p>BootstrapVue的弹出窗口通过使用指令修饰符或配置选项，通过我们的自定义CSS支持上下文颜色变体：</p>
<div translate="translate" class="bd-example vue-example vue-example-b-popover-variants">
<div class="container-fluid">
<div class="row text-center">
<div class="col">
<button title="Danger variant" type="button" class="btn btn-secondary"> 危险编辑</button>
</div>
<div class="col">
<button title="Info variant" type="button" class="btn btn-secondary"> 信息配置 </button>
</div>
</div>
</div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>
          <span class="hljs-attr">v-b-popover.hover.v-danger</span>=<span class="hljs-string">"{ content: 'Popover content' }"</span>
          <span class="hljs-attr">title</span>=<span class="hljs-string">"Danger variant"</span>
        &gt;</span>
          Danger Modifier
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>
          <span class="hljs-attr">v-b-popover.hover</span>=<span class="hljs-string">"{ variant: 'info',  content: 'Popover content' }"</span>
          <span class="hljs-attr">title</span>=<span class="hljs-string">"Info variant"</span>
        &gt;</span>
          Info Config
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre>
</div>
<p>BBootstrap默认主题变体是： <code class="text-nowrap" translate="no">危险</code>, <code class="text-nowrap" translate="no">警告</code>, <code class="text-nowrap" translate="no">成功</code>, <code class="text-nowrap" translate="no">主要</code>, <code class="text-nowrap" translate="no">次要</code>, <code class="text-nowrap" translate="no">信息</code>, <code class="text-nowrap" translate="no">浅色</code>, 和 <code class="text-nowrap" translate="no">深色</code>。你可以通过 <a href="/docs/reference/theming" class="font-weight-bold">SCSS variables</a>变量更改或添加其他变体</p>
<p>可以将自定义类应用于Popover外包装 </p>
<div> 通过使用customClass选项，属性：
<p></p>
<div class="bd-code">
<pre class="hljs html p-2" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>
  <span class="hljs-attr">v-b-popover.hover</span>=<span class="hljs-string">"{ customClass: 'my-popover-class', content: 'Popover content' }"</span>
  <span class="hljs-attr">title</span>=<span class="hljs-string">"Popover"</span>
&gt;</span>
  Button
<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span></pre>
</div>
<h2 id="directive-syntax-and-usage" class="bv-no-focus-ring"><span class="bd-content-title">指令语法和用法<a class="anchorjs-link" href="#directive-syntax-and-usage" aria-labelledby="directive-syntax-and-usage"></a></span></h2>
<div class="bd-code">
<pre class="hljs html p-2" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover:</span>[<span class="hljs-attr">container</span>]<span class="hljs-attr">.</span>[<span class="hljs-attr">mod</span>]<span class="hljs-attr">.</span>[<span class="hljs-attr">mod</span>]<span class="hljs-attr">.</span>[<span class="hljs-attr">...</span>]<span class="hljs-attr">.</span>[<span class="hljs-attr">mod</span>]=<span class="hljs-string">"&lt;value&gt;"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span></pre>
</div>
<p>其中<code class="text-nowrap" translate="no">[container]</code> 可以是（可选):</p>
<ul>
<li>可见时用于放置弹出框标记的元素ID（减去 <code class="text-nowrap" translate="no">#</code>)</li>
<li>如果未提供，则在可见时将弹出框附加到 <code class="text-nowrap" translate="no">&lt;body&gt;</code> when visible</li>
</ul>
<p>其中 <code class="text-nowrap" translate="no">[mod]</code> 是可以 (全部选择):</p>
<ul>
<li>定位: <code class="text-nowrap" translate="no">上</code>, <code class="text-nowrap" translate="no">下</code>, <code class="text-nowrap" translate="no">左</code>, <code class="text-nowrap" translate="no">右</code>, <code class="text-nowrap" translate="no">自动</code>; 或偏移对齐位置 <code class="text-nowrap" translate="no">左上</code>, <code class="text-nowrap" translate="no">右上</code>, <code class="text-nowrap" translate="no"></code>,或 <code class="text-nowrap" translate="no">右下</code>, <code class="text-nowrap" translate="no">左下</code>, <code class="text-nowrap" translate="no">左下</code>, <code class="text-nowrap" translate="no">右上</code>, 或 <code class="text-nowrap" translate="no">右下</code> （找到的最后一个获胜，默认为 <code class="text-nowrap" translate="no">右</code>).</li>
<li>事件触发: <code class="text-nowrap" translate="no">单击</code>, <code class="text-nowrap" translate="no">悬停</code>, <code class="text-nowrap" translate="no">聚焦</code>, <code class="text-nowrap" translate="no">模糊</code> (如果未指定默认为<code class="text-nowrap" translate="no">单击</code>这 <code class="text-nowrap" translate="no">模糊</code> 仅是关闭处理程序，如果由其自身指定则转化为 <code class="text-nowrap" translate="no">焦点</code>).
 如果你只想手动控制可见性，你就<code class="text-nowrap" translate="no">手动</code> </li>
<li><code class="text-nowrap" translate="no">nofade</code> 关闭动画</li>
<li><code class="text-nowrap" translate="no">html</code> 以启用呈现原始HTML。 默认情况下，HTML被转义并转换为文本。</li>
<li>格式为 <code class="text-nowrap" translate="no">d###</code>的延迟值 (其中 <code class="text-nowrap" translate="no">###</code> 以毫秒为单位, 默认为 <code class="text-nowrap" translate="no">50</code>), 用于<code class="text-nowrap" translate="no">隐藏</code> 和 <code class="text-nowrap" translate="no">显示</code>.</li>
<li>一个显示格式为 <code class="text-nowrap" translate="no">ds###</code>的延迟值 (其中 <code class="text-nowrap" translate="no">###</code> 以毫秒为单位, 默认为 <code class="text-nowrap" translate="no">50</code>), 仅用于 <code class="text-nowrap" translate="no">显示</code></li>
<li>一个隐藏格式为<code class="text-nowrap" translate="no">dh###</code> 的延迟值(其中 <code class="text-nowrap" translate="no">###</code> 以毫秒为单位, 默认为 <code class="text-nowrap" translate="no">50</code>), 仅用于 <code class="text-nowrap" translate="no">隐藏</code></li>
<li>以<code class="text-nowrap" translate="no">o###</code>格式的偏移值（以像素为单位） (其中 <code class="text-nowrap" translate="no">###</code> 是像素数,默认为
 <code class="text-nowrap" translate="no">0</code>. 允许使用负值). 请注意，如果提供了偏移量，则对齐位置将回退到顶部，底部，左侧或右侧之一。
will fallback to one of <code class="text-nowrap" translate="no">top</code>, <code class="text-nowrap" translate="no">bottom</code>, <code class="text-nowrap" translate="no">left</code>, or <code class="text-nowrap" translate="no">right</code>.</li>
<li> <code class="text-nowrap" translate="no">窗口</code> 或者 <code class="text-nowrap" translate="no">视口</code>.的边界设置。 限制弹出框的视觉位置的元素。 如果未指定，则边界默认为触发器元素的滚动父级（在大多数情况下就足够了）。</li>
<li> <code class="text-nowrap" translate="no">v-XXX</code>形式的上下文体 （其中 <code class="text-nowrap" translate="no">XXX</code> 是颜色变体名称).</li>
</ul>
<p>其中<code class="text-nowrap" translate="no">&lt;value&gt;</code> 可以是（可选）:</p>
<ul>
<li>包含弹出窗 <strong>内容</strong>的字串符</li>
<li>一个函数引用，用于生成弹出窗口的 <strong>内容</strong> （接收一个参数，该参数是对触发弹出窗口的DOM元素的引用）</li>
<li>包含更复杂的弹出框配置的对象，有关可用选项，请参见下文。</li>
</ul>
<p><strong>选项配置对象属性：</strong></p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>Property</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="text-nowrap" translate="no">animation</code></td>
<td>Boolean</td>
<td><code class="text-nowrap" translate="no">true</code></td>
<td>Apply a CSS fade transition to the popover.</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">container</code></td>
<td>String ID or HTMLElement or <code class="text-nowrap" translate="no">false</code></td>
<td><code class="text-nowrap" translate="no">false</code></td>
<td>Appends the popover to a specific element. Example: <code class="text-nowrap" translate="no">container: '#body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize. When set to <code class="text-nowrap" translate="no">false</code> the popover will be appended to <code class="text-nowrap" translate="no">body</code>, or if the trigger element is inside a modal it will append to the modal's container.</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">delay</code></td>
<td>Number or Object</td>
<td><code class="text-nowrap" translate="no">50</code></td>
<td>Delay showing and hiding the popover (ms). If a number is supplied, delay is applied to both hide/show. Object structure is: <code class="text-nowrap" translate="no">delay: { "show": 500, "hide": 100 }</code></td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">html</code></td>
<td>Boolean</td>
<td><code class="text-nowrap" translate="no">false</code></td>
<td>Allow HTML in the popover. If true, HTML tags in the popover's title and content will be rendered in the tooltip. If false, the title and content will be inserted as plain text. Use text if you're worried about XSS attacks.</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">placement</code></td>
<td>String or Function</td>
<td><code class="text-nowrap" translate="no">'top'</code></td>
<td>How to position the popover - <code class="text-nowrap" translate="no">auto</code>, <code class="text-nowrap" translate="no">top</code>, <code class="text-nowrap" translate="no">bottom</code>, <code class="text-nowrap" translate="no">left</code>, <code class="text-nowrap" translate="no">right</code>, <code class="text-nowrap" translate="no">topleft</code>, <code class="text-nowrap" translate="no">topright</code>, <code class="text-nowrap" translate="no">bottomleft</code>, <code class="text-nowrap" translate="no">bottomright</code>, <code class="text-nowrap" translate="no">lefttop</code>, <code class="text-nowrap" translate="no">leftbottom</code>, <code class="text-nowrap" translate="no">righttop</code>, or <code class="text-nowrap" translate="no">rightbottom</code>. When <code class="text-nowrap" translate="no">auto</code> is specified, it will dynamically reorient the tooltip.</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">title</code></td>
<td>String or Function</td>
<td><code class="text-nowrap" translate="no">''</code></td>
<td>Default title value if title attribute isn't present. If a function is given, it must return a string.</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">content</code></td>
<td>String or Function</td>
<td><code class="text-nowrap" translate="no">''</code></td>
<td>Default content value. If a function is given, it must return a string.</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">trigger</code></td>
<td>String</td>
<td><code class="text-nowrap" translate="no">'hover focus'</code></td>
<td>How tooltip is triggered: <code class="text-nowrap" translate="no">click</code>, <code class="text-nowrap" translate="no">hover</code>, <code class="text-nowrap" translate="no">focus</code>. You may pass multiple triggers; separate them with a space. Specify <code class="text-nowrap" translate="no">'manual'</code> if you are only going to show and hide the tooltip programmatically.</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">offset</code></td>
<td>Number or String</td>
<td><code class="text-nowrap" translate="no">0</code></td>
<td>Offset of the popover relative to its target. For more information refer to Popper.js's offset docs.</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">fallbackPlacement</code></td>
<td>String or Array</td>
<td><code class="text-nowrap" translate="no">'flip'</code></td>
<td>Allow to specify which position Popper will use on fallback. Can be <code class="text-nowrap" translate="no">flip</code>, <code class="text-nowrap" translate="no">clockwise</code>, <code class="text-nowrap" translate="no">counterclockwise</code> or an array of placements. For more information refer to Popper.js's behavior docs.</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">boundary</code></td>
<td>String ID or HTMLElement</td>
<td><code class="text-nowrap" translate="no">'scrollParent'</code></td>
<td>The container that the popover will be constrained visually. The default should suffice in most cases, but you may need to change this if your target element is in a small container with overflow scroll. Supported values: <code class="text-nowrap" translate="no">'scrollParent'</code> (default), <code class="text-nowrap" translate="no">'viewport'</code>, <code class="text-nowrap" translate="no">'window'</code>, or a reference to an HTML element.</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">boundaryPadding</code></td>
<td>Number</td>
<td><code class="text-nowrap" translate="no">5</code></td>
<td>Amount of pixel used to define a minimum distance between the boundaries and the popover. This makes sure the popover always has a little padding between the edges of its container.</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">variant</code></td>
<td>String</td>
<td><code class="text-nowrap" translate="no">null</code></td>
<td>Contextual color variant for the popover.</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">customClass</code></td>
<td>String</td>
<td><code class="text-nowrap" translate="no">null</code></td>
<td>A custom classname to apply to the popover outer wrapper element.</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">id</code></td>
<td>String</td>
<td><code class="text-nowrap" translate="no">null</code></td>
<td>An ID to use on the popover root element. If none is provided, one will automatically be generated. If you do provide an ID, it <em>must</em> be guaranteed to be unique on the rendered page.</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">disabled</code></td>
<td>Boolean</td>
<td><code class="text-nowrap" translate="no">false</code></td>
<td>Set to <code class="text-nowrap" translate="no">true</code> to disable the popover</td>
</tr>
</tbody>
</table>
</div>
<h3 id="usage" class="bv-no-focus-ring"><span class="bd-content-title">用法<a class="anchorjs-link" href="#usage" aria-labelledby="usage"></a></span></h3>
<p><strong>最简单的用法：</strong></p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-popover="'This is a Popover!'"</pre>
</div>
<p>或使用元素的 <code class="text-nowrap" translate="no">标题</code> 属性作为popover标头:</p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-popover title="This is a popover header"
v-b-popover="'This is popover content'" title="This is popover header"</pre>
</div>
<p>或提供标题和内容的对象：</p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-popover="{title:'Popover header', content:'Popover content'}"</pre>
</div>
<p><strong>启用HTML内容/标题：</strong></p>
<div class="bd-code">
<pre class="hljs html p-2" translate="no">v-b-popover.html="'<span class="hljs-tag">&lt;<span class="hljs-name">em</span>&gt;</span>Emphasis<span class="hljs-tag">&lt;/<span class="hljs-name">em</span>&gt;</span> in content'" title="<span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Bolded title<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span>"</pre>
</div>
<p><strong>展示位置示例：</strong></p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-popover.top</pre>
</div>
<p><strong>触发示例：</strong></p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-popover =&gt; Default of click
v-b-popover.hover =&gt; Hover only
v-b-popover.click =&gt; Click only
v-b-popover.hover.focus =&gt; Both hover and focus</pre>
</div>
<p><strong>组合：</strong></p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-popover.hover.bottom =&gt; Show on hover and place at bottom
v-b-popover.bottom.hover =&gt; Same as above
v-b-popover.bottom.click.html =&gt; Show on click and place at bottom with HTML content</pre>
</div>
<h2 id="hiding-and-showing-popovers-via-root-events" class="bv-no-focus-ring"><span class="bd-content-title">通过$ root事件隐藏和显示弹出窗口<a class="anchorjs-link" href="#hiding-and-showing-popovers-via-root-events" aria-labelledby="hiding-and-showing-popovers-via-root-events"></a></span></h2>
<p>你可以通过在 root上发出<code class="text-nowrap" translate="no">bv::hide::popover</code>事件来关闭（隐藏）<strong>所有打开的</strong>弹出窗口</p>
<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::hide::popover'</span>)</pre>
</div>
<p>要关闭 <strong>特定的弹出窗口</strong>, 请将触发器元素的<code class="text-nowrap" translate="no">id</code>, 或弹出窗口的<code class="text-nowrap" translate="no">id</code>(如果config对象中提供了该弹出窗口的ID）作为第一个参数传递：</p>
<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::hide::popover'</span>, <span class="hljs-string">'my-trigger-button-id'</span>)</pre>
</div>
<p>要打开 <strong>特定的弹出窗口</strong>, 在发出 <code class="text-nowrap" translate="no">bv::show::popover</code>事件时，将触发器元素的<code class="text-nowrap" translate="no">id</code>, 或弹出窗口的 <code class="text-nowrap" translate="no">id</code> （如果在config对象中提供了该弹出窗口的ID）作为第一个参数传递：</p>
<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::show::popover'</span>, <span class="hljs-string">'my-trigger-button-id'</span>)</pre>
</div>
<p>要同时打开所有弹出窗口，请在发出<code class="text-nowrap" translate="no">bv::show::popover</code>  事件时省略<code class="text-nowrap" translate="no">id</code>参数</p>
<p>
  75/5000
  这些事件适用于Popover的组件版本 <strong>和</strong> 指令版本</p>
<p>请注意 <strong>trigger 元素</strong> 必须存在于DOM中并且处于可见状态，以使弹出窗口实例化并显示。</p>
<h2 id="disabling-and-enabling-popovers-via-root-events" class="bv-no-focus-ring"><span class="bd-content-title">通过$ root事件禁用和启用弹出窗口<a class="anchorjs-link" href="#disabling-and-enabling-popovers-via-root-events" aria-labelledby="disabling-and-enabling-popovers-via-root-events"></a></span></h2>
<p>你可以通过在 $root上发出<code class="text-nowrap" translate="no">bv::disable::popover</code>事件来禁止<strong>所有</strong> 弹出窗口 </p>
<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::disable::popover'</span>)</pre>
</div>
<p>要禁用所有的弹出框，请触发器元素的<code class="text-nowrap" translate="no">id</code>,或弹出框的 <code class="text-nowrap" translate="no">id</code>  (如果config对象中提供了该弹出框的ID）作为第一个参数传递：</p>
<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::disable::popover'</span>, <span class="hljs-string">'my-trigger-button-id'</span>)</pre>
</div>
<p>要启用<strong>特定的弹出框</strong>, 在发出<code class="text-nowrap" translate="no">bv::enable::popover</code>事件时，将触发元素的 <code class="text-nowrap" translate="no">id</code>, 或弹出窗口的 <code class="text-nowrap" translate="no">id</code> （如果在config对象中提供了弹出窗口的ID）作为第一个参数传递：:</p>
<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::enable::popover'</span>, <span class="hljs-string">'my-trigger-button-id'</span>)</pre>
</div>
<p>要同时启用所有弹窗，请在发出<code class="text-nowrap" translate="no">bv::enable::popover</code>事件时省略 <code class="text-nowrap" translate="no">id</code> 参数。</p>
<p>这些事件适用于Popover的组件版本和指令版本。</p>
<p>请注意 <strong>trigger 元素</strong> 必须存在于DOM中才能启用或禁用弹出窗口。</p>
<h2 id="see-also" class="bv-no-focus-ring"><span class="bd-content-title">也可以看看<a class="anchorjs-link" href="#see-also" aria-labelledby="see-also"></a></span></h2>
<ul>
<li><a href="/docs/directives/tooltip" class="font-weight-bold"><code class="text-nowrap" translate="no">v-b-tooltip</code> directive</a></li>
<li><a href="/docs/components/popover" class="font-weight-bold"><code class="text-nowrap" translate="no">&lt;b-popover&gt;</code> component</a></li>
<li><a href="/docs/components/tooltip" class="font-weight-bold"><code class="text-nowrap" translate="no">&lt;b-tooltip&gt;</code> component</a></li>
</ul>
<!-- Directive reference section auto generated from directive package.json --> 
</div>
<h2 id="directive-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">指令参考e<a href="/docs/directives/popover#directive-reference" class="anchorjs-link" aria-labelledby="directive-reference" target="_self"></a></span></h2>
<h3 id="importing-individual-directives" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个指令 <a href="/docs/directives/popover#importing-individual-directives" class="anchorjs-link" aria-labelledby="importing-individual-directives" target="_self"></a></span></h3>
<p> 您可以通过以下命名的导出将单个指令导入到您的项目中： </p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__550">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">指示</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名为出口</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">v-b-popover</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">VBPopover</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>列如:</strong></p>
<pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { VBPopover } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
<span class="hljs-comment">// Note: Vue automatically prefixes the directive name with 'v-'</span>
Vue.directive(<span class="hljs-string">'b-popover'</span>, VBPopover)</pre>
</article>
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入为Vue.js插件 <a href="/docs/directives/popover#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p>该插件包括上面列出的所有单个指令。</p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__560">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名为出口</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">VBPopoverPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>列如:</strong></p>
<pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { VBPopoverPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(VBPopoverPlugin)</pre>





</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
